<template>
    <el-card>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="一级分类">
            <el-select v-model="categoryStore.c1Id" @change="handler" :disabled="scene==0?false:true">
              <!-- label:即为展示数据 value:即为select下拉菜单收集的数据 -->
              <el-option v-for="(c1) in categoryStore.c1Arr" :key="c1.id" :label="c1.name" :value="c1.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="二级分类">
            <el-select v-model="categoryStore.c2Id" @change="handler2" :disabled="scene==0?false:true">
              <el-option v-for="(c2) in  categoryStore.c2Arr" :key="c2.id" :label="c2.name" :value="c2.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="三级分类">
            <el-select v-model="categoryStore.c3Id" :disabled="scene==0?false:true">
              <el-option v-for="(c3) in categoryStore.c3Arr" :key="c3.id" :label="c3.name" :value="c3.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-card>
</template>

<script setup lang="ts">
//引入组件挂在完毕的方法
import { onMounted } from 'vue';
//引入分类相关的仓库
import userCategoryStore from '@/store/modules/category';
let categoryStore = userCategoryStore();
//分类全局组件挂载完毕，通知仓库发送请求获取一级分类的数据
onMounted(()=>{
  getC1();
})
const handler = ()=>{
  //需要将二级和三级数据清空
  categoryStore.c2Id = '';
  categoryStore.c3Arr = [];
  categoryStore.c3Id = '';
  //此方法即为一级分类下拉菜单的chang事件（选中值的时候会触发，保证一级分类id）
  categoryStore.getC2()
}
const handler2 = ()=>{
  //当二级数据发生改变三级分类应清空
  categoryStore.c3Id = '';
  categoryStore.getC3()
}
//通知仓库获取一级分类的方法
const getC1 = ()=>{
  categoryStore.getC1();
}
//接受父组件传递过来的scene
defineProps(['scene'])
</script>
<style scoped>
.demo-form-inline .el-input {
    --el-input-width: 220px;
  }
  
  .demo-form-inline .el-select {
    --el-select-width: 220px;
  }
</style>